<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 to-purple-50">
    <!-- Header -->
    <header class="bg-white shadow-sm border-b border-gray-200 sticky top-0 z-50">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">
          <div class="flex items-center space-x-4">
            <NuxtLink to="/" class="text-2xl font-bold text-gradient">
              🛠️ 八八在线工具
            </NuxtLink>
          </div>
          
          <nav class="hidden md:flex items-center space-x-8">
            <NuxtLink to="/" class="text-gray-700 hover:text-blue-600 font-medium transition-colors">
              首页
            </NuxtLink>
            <NuxtLink to="/text-tools" class="text-gray-700 hover:text-blue-600 font-medium transition-colors">
              文本工具
            </NuxtLink>
            <NuxtLink to="/image-tools" class="text-gray-700 hover:text-blue-600 font-medium transition-colors">
              图片工具
            </NuxtLink>
            <NuxtLink to="/encode-tools" class="text-gray-700 hover:text-blue-600 font-medium transition-colors">
              编码转换
            </NuxtLink>
            <NuxtLink to="/video-tools" class="text-gray-700 hover:text-blue-600 font-medium transition-colors">
              视频工具
            </NuxtLink>
            <NuxtLink to="/game-tools" class="text-gray-700 hover:text-blue-600 font-medium transition-colors">
              游戏工具
            </NuxtLink>
            <NuxtLink to="/generator-tools" class="text-gray-700 hover:text-blue-600 font-medium transition-colors">
              生成工具
            </NuxtLink>
            <NuxtLink to="/live-tools" class="text-gray-700 hover:text-blue-600 font-medium transition-colors">
              生活工具
            </NuxtLink>
            <NuxtLink to="/ai-tools" class="text-gray-700 hover:text-blue-600 font-medium transition-colors">
              智能算命
            </NuxtLink>
            <a href="https://tv.linpoem.online" target="_blank" rel="noopener noreferrer" class="text-gray-700 hover:text-blue-600 font-medium transition-colors flex items-center" aria-label="邻诗TV">
              邻诗TV
              <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 3h7v7m0 0L10 14m4-11L5 19"></path>
              </svg>
            </a>
          </nav>

          <!-- Mobile menu button -->
          <button @click="isMenuOpen = !isMenuOpen" class="md:hidden p-2 rounded-md text-gray-700 hover:bg-gray-100">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
            </svg>
          </button>
        </div>
      </div>

      <!-- Mobile menu -->
      <div v-if="isMenuOpen" class="md:hidden bg-white border-t border-gray-200">
        <div class="px-2 pt-2 pb-3 space-y-1">
          <NuxtLink to="/" class="block px-3 py-2 text-gray-700 hover:text-blue-600 font-medium">
            首页
          </NuxtLink>
          <NuxtLink to="/text-tools" class="block px-3 py-2 text-gray-700 hover:text-blue-600 font-medium">
            文本工具
          </NuxtLink>
          <NuxtLink to="/image-tools" class="block px-3 py-2 text-gray-700 hover:text-blue-600 font-medium">
            图片工具
          </NuxtLink>
          <NuxtLink to="/encode-tools" class="block px-3 py-2 text-gray-700 hover:text-blue-600 font-medium">
            编码转换
          </NuxtLink>
          <NuxtLink to="/video-tools" class="block px-3 py-2 text-gray-700 hover:text-blue-600 font-medium">
            视频工具
          </NuxtLink>
          <NuxtLink to="/game-tools" class="block px-3 py-2 text-gray-700 hover:text-blue-600 font-medium">
            游戏工具
          </NuxtLink>
          <NuxtLink to="/generator-tools" class="block px-3 py-2 text-gray-700 hover:text-blue-600 font-medium">
            生成工具
          </NuxtLink>
          <NuxtLink to="/live-tools" class="block px-3 py-2 text-gray-700 hover:text-blue-600 font-medium">
            生活工具
          </NuxtLink>
          <NuxtLink to="/ai-tools" class="block px-3 py-2 text-gray-700 hover:text-blue-600 font-medium">
            智能算命
          </NuxtLink>
          <a href="https://tv.linpoem.online" target="_blank" rel="noopener noreferrer" class="block px-3 py-2 text-gray-700 hover:text-blue-600 font-medium" aria-label="Gitee 仓库">
            邻诗TV
          </a>
        </div>
      </div>
    </header>

    <!-- Main Content -->
    <main class="flex-1">
      <slot />
    </main>

    <!-- Footer -->
    <footer class="bg-white border-t border-gray-200 mt-16">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
          <div class="col-span-1 md:col-span-2">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">八八在线工具</h3>
            <p class="text-gray-600 mb-4">
              提供各种实用的在线工具，无需注册即可使用。所有工具都在浏览器中运行，保护您的隐私安全。
            </p>
            <p class="text-gray-600 mb-4">
              如果没有找到想要的工具，联系下面的邮箱提出建议，我们会尽快添加。
            </p>
            <p class="text-gray-600 mb-4">
              使用问题OR合作联系邮箱：fqymcu994@outlook.com
            </p>
          </div>
          
          <div>
            <h4 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">工具分类</h4>
            <ul class="space-y-2">
              <li><NuxtLink to="/text-tools" class="text-gray-600 hover:text-blue-600">文本工具</NuxtLink></li>
              <li><NuxtLink to="/image-tools" class="text-gray-600 hover:text-blue-600">图片工具</NuxtLink></li>
              <li><NuxtLink to="/encode-tools" class="text-gray-600 hover:text-blue-600">编码转换</NuxtLink></li>
              <li><NuxtLink to="/generator-tools" class="text-gray-600 hover:text-blue-600">生成工具</NuxtLink></li>
              <li><NuxtLink to="/video-tools" class="text-gray-600 hover:text-blue-600">视频工具</NuxtLink></li>
              <li><NuxtLink to="/game-tools" class="text-gray-600 hover:text-blue-600">游戏工具</NuxtLink></li>
              <li><NuxtLink to="/live-tools" class="text-gray-600 hover:text-blue-600">生活工具</NuxtLink></li>
              <li><NuxtLink to="/ai-tools" class="text-gray-600 hover:text-blue-600">智能算命</NuxtLink></li>
            </ul>
          </div>
          
          <div>
            <h4 class="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-4">关于</h4>
            <ul class="space-y-2">
              <li><span class="text-gray-600">所有工具完全</span></li>
              <li><span class="text-gray-600">无需注册登录</span></li>
              <li><span class="text-gray-600">本地处理保护隐私</span></li>
              <li><span class="text-gray-600">持续更新工具</span></li>
            </ul>
          </div>
        </div>
        
        <div class="border-t border-gray-200 mt-8 pt-8 text-center">
          <p class="text-gray-500">
            © 2025 八八在线工具. 所有工具免费使用（智能算命每日一次，成本较高，有实力的老板可以支持一下），祝您使用愉快！
          </p>
          <p class="text-sm text-gray-500 mt-1">
             <NuxtLink to="/core/privacy-policy" class="site-link">隐私政策</NuxtLink>
             -
             <NuxtLink to="/core/friend-links" class="site-link">友链计划</NuxtLink>
             -
             <NuxtLink to="/core/ads" class="site-link">广告计划</NuxtLink>
          </p>
          <p class="text-sm text-gray-500 mt-1">
             友链： <NuxtLink to="https://1000tool.com/?ref=88box.com" class="site-link">千盒工具</NuxtLink>
          </p>
          <p class="text-sm text-gray-500 mt-2">
            访问量统计：
            <span class="font-medium text-gray-700" v-if="visits !== null">{{ visits }}</span>
            <span v-else>加载中...</span>
          </p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
const isMenuOpen = ref(false)
const visits = ref(null)

onMounted(async () => {
  // 在客户端首次加载时对访问量自增一次，并把返回的最新值显示在页面底部
  try {
    const res = await $fetch('/api/visits', { method: 'POST' })
    // 返回结构 { count: number }
    visits.value = res?.count ?? res
  } catch (e) {
    // 忽略错误，只是显示为 null
    console.error('visits increment failed', e)
  }
})
</script>
